<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-white">
			<block slot="backText"></block>
			<block slot="content">区域代理</text></block>
		</cu-custom>
		
		<!-- <view class="whole-box" style="background-image: url(https://pingtuan-1251091607.cos.ap-shanghai.myqcloud.com/images/2021/03/10/image_1615357083_VQ5anlu7.jpg);background-size: 100% 100%;"> -->
		<view class="whole-box">
			<view class="gold-black-box">
				
				<view class="top-box">
					<!-- <image class="top-box-bg" src="@/static/black_bg/stander-box.png" mode="aspectFill"></image> -->
					<view class="top-box-content">
						<image class="avatar" :src="member && member.head_portrait ? member. head_portrait : '../../../static/default-avatar.png'" mode="aspectFill"></image>
						<text class="username">{{member && member.nickname ? member.nickname : '' }}
						<text v-if="member && member.address_dq != ''">({{member && member.address_dq}})</text>
						</text>
						<view class="data-box" v-if="detail">
							<view class="data-item">
								<text class="note">今日本地收益</text>
								<text class="num">{{detail.integral_today?detail.integral_today:0}}</text>
								
							</view>
							<view class="data-item">
								<text class="note">昨日本地收益</text>
								<text class="num">{{detail.integral_yesterday?detail.integral_yesterday:0}}</text>
								
							</view>
							<view class="data-item">
								<text class="note">累积本地收益</text>
								<text class="num">{{detail.integral_all?detail.integral_all:0}}</text>	
							</view>
						</view>
					</view>
					<!-- <image class="bg-logo" src="@/static/black_bg/bg-logo.png"></image> -->
					<view class="level-detail" v-if="member && member.level">
						<image src="@/static/level-blo.png"></image>
						<text>{{member.level.name}}</text>
					</view>
				</view>
				
				<view class="black-bg-box">
					<view class="title" >近11天本地会员数据统计（代理区域）</view>
					<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts"
					 :style="{'width':cWidth+'px','height':cHeight+'px'}" disable-scroll=true></canvas>
					<cover-view class="mark-box"></cover-view>
				</view>
				
				<!-- <view class="data-box column4" v-if="detail">
					<view class="data-item show-four">
						<text class="num">{{detail.level_num&&detail.level_num[1]&&detail.level_num[1].count?detail.level_num[1].count:0}}</text>
						<text class="note">本地会员数</text>
					</view>
					<view class="data-item show-four">
						<text class="num">{{detail.level_num&&detail.level_num[2]&&detail.level_num[2].count?detail.level_num[2].count:0}}</text>
						<text class="note">本地VIP</text>
					</view>
					<view class="data-item show-four">
						<text class="num">{{detail.level_num&&detail.level_num[3]&&detail.level_num[3].count?detail.level_num[3].count:0}}</text>
						<text class="note">本地团长</text>
					</view>
					<view class="data-item show-four">
						<text class="num">{{detail.level_num&&detail.level_num[4]&&detail.level_num[4].count?detail.level_num[4].count:0}}</text>
						<text class="note">本地合伙人</text>
					</view>
				</view> -->
				
				<view class="black-bg-box">
					<view class="title" >近11天本地订单数据统计（代理区域）</view>
					<canvas canvas-id="canvasLineB" id="canvasLineB" class="charts"
				 :style="{'width':cWidth+'px','height':cHeight+'px'}" disable-scroll=true ></canvas>
					<cover-view class="mark-box"></cover-view>
				</view>
				
				<view class="note-line">
					<view class="title">本地订单明细</view>
					<view class="title">订单总数：{{order_count}}</view>
					<view class="more" @tap="goPage('/pages/member/team/area_orders')">查看更多<text class="cuIcon cuIcon-right"></text></view>
				</view>
				
				<view class="my-data-box" v-for="(item,index) in order_list" :key="index" >
					<!-- <image class="my-data-box-bg" src="@/static/black_bg/stander-box.png" mode="aspectFill"></image> -->
					<view class="my-data-box-content">
						<view class="stander-line"><text class="title">（{{item.order?item.order.receiver_region_name:''}}）拼中订单 ： {{item.order&&item.order.product&&item.order.product[0]&&item.order.product[0].product_name?item.order.product[0].product_name:''}}</text></view>
						<view class="stander-line"><text class="time">{{$common.timeFormat(item.created_at)}}</text></view>
						<view class="stander-line"><text class="order_sn">订单编号：{{item.order?item.order.order_sn:''}}</text></view>
						<view class="stander-line"><text class="price">拼中金额 ：{{item.order?item.order.order_money:'0.00'}}</text><text class="num">+{{parseFloat(item.num).toFixed(2)}}</text></view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import uCharts from '../../../components/u-charts/u-charts.js';
	var _self;
	var canvasObj = {};
	import {
		mapState
	} from 'vuex'
	export default {
		computed: mapState(['forcedLogin', 'hasLogin', 'channelLogin']),
		mounted() {
			// this.getScrollH()
		},
		data() {
			return {
				cWidth: '',
				cHeight: '',
				cWidth2: '', //横屏图表
				cHeight2: '', //横屏图表
				cWidth3: '', //圆弧进度图
				cHeight3: '', //圆弧进度图
				arcbarWidth: '', //圆弧进度图，进度条宽度,此设置可使各端宽度一致
				gaugeWidth: '', //仪表盘宽度,此设置可使各端宽度一致
				tips: '',
				pixelRatio: 1,
				serverData: '',
				itemCount: 30, //x轴单屏数据密度
				sliderMax: 50,
				member: null,
				detail: null,
				order_list: [],
				order_count:0,
			}
		},
		onLoad() {
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function(res) {
					if (res.pixelRatio > 1) {
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio = 2;
					}
				}
			});
			//#endif
			this.cWidth = uni.upx2px(690);
			this.cHeight = uni.upx2px(380);
			// this.cWidth2 = uni.upx2px(700);
			// this.cHeight2 = uni.upx2px(1100);
			// this.cWidth3 = uni.upx2px(250);
			// this.cHeight3 = uni.upx2px(250);
			// this.arcbarWidth = uni.upx2px(24);
			// this.gaugeWidth = uni.upx2px(30);
			
			this.$common.getMember().then((member) => {
				this.member = member
				console.log(this.member)
			})
			
			
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			getServerData() {
				uni.showLoading({
					title: "正在加载数据..."
				})
				this.$http
					.get('channel_region_index_new')
					.then((response) => {
						this.detail = response.data.data
						console.log(this.detail);
						this.order_list = response.data.data.order_list
						this.order_count=this.detail.order_count;
						uni.hideLoading()
						console.log(this.detail.order_num_uchat)
						this.showLineA('canvasLineA', this.detail.integral_uchat)
						this.showLineA('canvasLineB', this.detail.order_num_uchat)
					})
					.catch((response) => {
						uni.hideLoading()
						console.log(response)
					})
		
			},
			showLineA(canvasId, chartData) {
				let xdatas = chartData.categories
				for(let i in xdatas){
					xdatas[i] = xdatas[i].substr(5); 
				}
				canvasObj[canvasId] = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 8,
					padding: [15, 15, 15, 15],
					legend: {
						show: false,
						padding: 5,
						lineHeight: 11,
						margin: 5,
					},
					// dataLabel: false,
					// dataPointShape: false,
					colors: ['#fbbd08'],
					background: '#333333',
					pixelRatio: _self.pixelRatio,
					categories: xdatas,
					series: chartData.series,
					animation: false,
					enableScroll: false, //开启图表拖拽功能
					xAxis: {
						disableGrid: false,
						type: 'grid',
						gridType: 'dash',
						itemCount: 11,
						scrollShow: true,
						scrollAlign: 'left',
						//scrollBackgroundColor:'#F7F7FF',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条背景颜色,默认为 #EFEBEF
						//scrollColor:'#DEE7F7',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条颜色,默认为 #A6A6A6
					},
					yAxis: {
						//disabled:true
						gridType: 'dash',
						splitNumber: 8,
						min: 0,
						max: 160,
						format: (val) => {
							return val.toFixed(0)
						} //如不写此方法，Y轴刻度默认保留两位小数
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					dataLabel: true,
					dataPointShape: true,
					extra: {
						lineStyle: 'straight'
					},
				});
		
			},
			
			// touchLineA(e) {
			// 	canvasObj['canvasLineA'].scrollStart(e);
			// },
			// moveLineA(e) {
			// 	canvasObj['canvasLineA'].scroll(e);
			// },
			// touchEndLineA(e) {
			// 	canvasObj['canvasLineA'].scrollEnd(e);
			// 	//下面是toolTip事件，如果滚动后不需要显示，可不填写
			// 	canvasObj['canvasLineA'].showToolTip(e, {
			// 		format: function(item, category) {
			// 			return category + ' ' + item.name + ':' + item.data
			// 		}
			// 	});
			// },
		},
	}
</script>


<style>
	.whole-box{
		background-image: url(../../../static/red-new/new-back.png);
		background-size: 100% 100%;
		min-height: calc(100vh - 45px);
		padding: 12px 0 12px;
		width: 100%;
	}
	.gold-black-box{
		padding: 12px 0 12px;
		margin: 0 10rpx;
		/* border: 2rpx solid #999999; */
		border-radius: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.gold-black-box .top-box{
		/* margin-top: 25rpx; */
		width: 690rpx;
		height: 460rpx;
		/* border: 2rpx solid #999999; */
		border-radius: 30rpx;
		overflow: hidden;
		position: relative;
		background-color: #ffffff;
	}
	.top-box .top-box-bg{
		width: 100%;
		height: 100%;
	}
	.top-box .top-box-content{
		width: 690rpx;
		/* height: 276rpx; */
		position: absolute;
		left: 0;
		top: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.top-box-content .avatar{
		margin-top: 26rpx;
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		border: 1rpx solid #EAEAEA;
	}
	
	.list-item .avatar{
		width: 108rpx;
		height: 108rpx;
		border-radius: 50%;
		border: 1rpx solid #EAEAEA;
		margin-right: 20rpx;
		flex-shrink: 0;
	}
	.top-box-content .username{
		margin-top: 14rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #000000;
	}
	.top-box-content .data-box{
		margin-top: 20rpx;
		width: 100%;
		margin-top: 28rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.data-box.column4{
		padding: 20rpx 0;
		margin: 0 40rpx;
		width: 690rpx;
		margin-top: 28rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		/* border-bottom: 1rpx solid #E5D4B9; */
		background-color: #FFF5C7;
		border-radius: 30rpx;
	}
	.data-box .data-item{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.data-box .data-item .num{
		width: 86rpx;
		height: 86rpx;
		/* background-color: #333333; */
		/* border: 2rpx solid #E5D4B9; */
		border-right: 0;
		border-bottom: 0;
		/* border-radius: 50% 50% 0 50%; */
		border-bottom-right-radius: 0;
		text-align: center;
		line-height: 86rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #000000;;
	}
	.data-box .data-item .note{
		margin-top: 20rpx;
		font-size: 26rpx;
		font-weight: bold;
		color: #ffffff;
		/* background-color: #FCC710; */
		width: 80px;
		text-align: center;
		height: 25px;
		line-height: 25px;
		border-radius: 30rpx;
		/* background: -webkit-gradient(linear, 0 0, 0 100%, from(#FFEA5E), to(#FCC710)); */
		/* background: -webkit-linear-gradient(left, #FFEA5E, #FFEA5E, #FCC710, #FCC710); */
		background-color: #FB7483;
		/* box-shadow: 0px 2rpx 0px 0px rgba(91, 82, 67, 0.5); */
		width: 200rpx;
		
	}
	
	.show-four .note{
		width: 160rpx!important;
	}
	
	.top-box .bg-logo{
		width: 196rpx;
		height: 54rpx;
		position: absolute;
		top: 26rpx;
		left: 20rpx;
	}
	
	.top-box .level-detail{
		position: absolute;
		top: 52rpx;
		left: 400rpx;
		padding: 0 20rpx;
		height: 40rpx;
		line-height: 40rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		/* background-color: #000000; */
		/* background: -webkit-linear-gradient(left, #C48415, #C48415, #EDCB3E, #CA8B0F); */
		/* background: -webkit-gradient(linear, 0 0, 0 100%, from(#C48415), to(#CA8B0F)); */
	}
	.level-detail image{
		width: 145rpx;
		height: 43rpx;
		margin-right: 6rpx;
		flex-shrink: 0;
		left: -13px;
		/* top: 16px; */
	}
	.level-detail text{
		font-size: 22rpx;
		font-weight: bold;
		color: #ffffff;
		position: absolute;
		margin-top: 10rpx;
		margin-left: -12rpx;
	}
</style>

<style>
	.gold-black-box .black-bg-box{
		margin-top: 20rpx;
		width: 690rpx;
		height: 430rpx;
		/* border: 2rpx solid #999999; */
		border-radius: 30rpx;
		overflow: hidden;
		background-color: #ffffff;
		position: relative;
	}
	.black-bg-box .title{
		margin-top: 20rpx;
		text-align: center;
		font-size: 24rpx;
		font-weight: bold;
		color: #000000;
	}
	.black-bg-box .mark-box{
		width: 690rpx;
		height: 380rpx;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	
	.note-line{
		margin-top: 30rpx;
		padding: 0 30rpx;
		width: 690rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.note-line .title{
		font-size: 30rpx;
		font-weight: bold;
		color: #000000;
	}
	.note-line .more{
		font-size: 28rpx;
		color: #000000;
	}
</style>

<style>
	.gold-black-box .my-data-box{
		margin-top: 12px;
		width: 690rpx;
		height: 250rpx;
		/* border: 2rpx solid #999999; */
		border-radius: 30rpx;
		overflow: hidden;
		position: relative;
		background-color: #FFF5C7;
	}
	.my-data-box .my-data-box-bg{
		width: 100%;
		height: 100%;
	}
	.my-data-box .my-data-box-content{
		width: 690rpx;
		height: 250rpx;
		position: absolute;
		left: 0;
		top: 0;
		padding: 0 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	
	.my-data-box-content .stander-line{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.stander-line .title{
		font-size: 30rpx;
		font-weight: bold;
		color: #000000;
	}
	.stander-line .time{
		font-size: 22rpx;
		color: #000000;
	}
	.stander-line .order_sn{
		font-size: 26rpx;
		color: #000000;
	}
	.stander-line .price{
		font-size: 26rpx;
		color: #000000;
	}
	.stander-line .num{
		font-size: 36rpx;
		color: #000000;
	}
</style>